<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=\, initial-scale=1.0">
    <title>会员</title>
    <link rel="stylesheet" href="https://at.alicdn.com/t/c/font_4803307_j0ppeqhqw7.css">
    <link rel="stylesheet" href="./css/public.css">
    <link rel="stylesheet" href="./css/member.css">
    <style>
        header {
            width: 100%;
            width: 100%;
            position: fixed;
            z-index: 1;
            top: 0;
            li {
                padding: 10px;
            }
        }
    
        main {
            box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
            .list {
                padding: 20px;
    
                li {
                    border: 1px solid #ffc107;
                    line-height: 2;
                    /* padding: 10px; */
                    width: 20%;
                    border-radius: 10px;
                    overflow: hidden;
    
                    /* 确保子元素不会溢出圆角边界 */
                    span {
                        font-size: 14px;
                    }
                }
            }
        }
    
        main .list li span:nth-child(2) {
            font-weight: bolder;
        }
    
        main .list li span:nth-child(3) {
            color: #ffc107;
            font-weight: bolder;
        }
    
        main .list li span:nth-child(4) {
            color: #999;
            font-size: 10px;
            text-decoration: line-through;
            font-weight: normal;
        }
    
        main .list li span:nth-child(5) {
            color: red;
            font-weight: bolder;
        }
    
        .ok {
            width: 100%;
            text-align: center;
            color: #fff;
            background-color: #ffc107;
        }
    
        body {
            font-family: Arial, sans-serif;
        }
    
        .member-benefits {
            margin: 0 auto;
            padding: 20px;
    
        }
    
        .member-benefits h2 {
            color: #333;
            font-size: 16px;
        }
    
        .member-benefits ol {
            list-style-type: decimal;
        }
    
        .member-benefits li {
            line-height: 1.5;
            margin-top: 10px;
            font-size: 12px;
            color: #666;
        }

        .coupon{
            padding: 15px 20px;
        }
        .coupon span{
            color: #999;
        }

        .points{
            padding: 15px 20px;
        }
        .points span{
            color: #999;
        }

        .validity{
            padding: 15px 20px;
        }
        .validity span{
            color: #999;
        }

        .tips{
            padding: 5px 20px;
        }
        .tips p{
            color: #999;
            font-size: 13px;
            line-height: 1.5;
        }

        .amount{
            padding: 15px 20px;
        }

        footer{
            width: 100%;
            position: fixed;
            z-index: 1;
            bottom: 0;
        }

        .next-step{
            padding: 10px 50px;
            background-color: #ffc107;
            border: none;
            border-radius: 5px;
        }
    </style>
</head>
<body>
    <header>
        <li class="flex jc-sb bg-base">
            <a href="./my.html">
                <i class="iconfont icon-icon_zuo"></i>
            </a>
            <span>会员服务</span>
            <span></span>
        </li>
    </header>
    <div style="height: 36px;"></div>

    <main>
        <div class="w100p bg-fff">
            <ul class="flex jc-sb list">
                <li class="flex fdc aic">
                    <i class="iconfont icon-huiyuanshoudanmanjian f30"></i>
                    <span>单次</span>
                    <span>¥9.9</span>
                    <span>¥50</span>
                    <span>体验价</span>
                </li>
                <li class="flex fdc aic">
                    <i class="iconfont icon-huiyuanshoudanmanjian f30"></i>
                    <span>6次卡</span>
                    <span>¥240</span>
                    <span>¥300</span>
                    <span>往返包邮</span>
                </li>
                <li class="flex fdc aic">
                    <i class="iconfont icon-huiyuanshoudanmanjian f30"></i>
                    <span>12次卡</span>
                    <span>¥420</span>
                    <span>¥600</span>
                    <span>往返包邮</span>
                </li>
                <li class="flex fdc aic">
                    <i class="iconfont icon-huiyuanshoudanmanjian f30"></i>
                    <span>年卡</span>
                    <span>¥799</span>
                    <span>¥1200</span>
                    <span>不限次数</span>
                </li>
            </ul>
        </div>

        <section class="member-benefits w100p bg-fff">
            <h2>会员权益</h2>
            <ol>
                <li>1.可借1个书袋，共10本</li>
                <li>2.每个书袋归还期限最长1个月</li>
                <li>3.同时能借一个书袋，归还后借另一个</li>
                <li>4.购买后效期1个月，超过有效期将无法使用</li>
                <li>5.借还双向包邮，免配送费</li>
                <li>6.购买后将获得支付金额相同麦粒积分，可在平台内抵扣现金或商城兑换礼品</li>
            </ol>
        </section>

        <div class="coupon flex jc-sb aic w100p bg-fff mt-10">
            <p>优惠券</p>
            <span>无可用</span>
        </div>
        
        <div class="points flex jc-sb aic w100p bg-fff mt-10">
            <p>麦粒(共0个)</p>
            <span>不可抵扣</span>
        </div>
        
        <div class="validity flex jc-sb aic w100p bg-fff mt-10">
            <p>会员有效期</p>
            <span>3个月</span>
        </div>
        
        <div class="tips flex jc-sb aic w100p  mt-10">
            <p>暂不支持 新疆、内蒙古、西藏、海南、甘肃、宁夏、青海、港澳台地区及境外的配送包邮服务</p>
        </div>

    </main>

    <div style="height: 50px;"></div>
    <footer>
        <div class="amount flex w100p aic jc-sb bg-fff">
            <p class="base fw-b">金额：<span id="totalAmount">0.0</span>元</p>
            <button class="next-step">下一步</button>
        </div>
    </footer>

    <script src="./js/jquery.js"></script>
    <script>
        $(document).ready(function () {
            var prices = {
                '单次': 9.9,
                '6次卡': 240,
                '12次卡': 420,
                '年卡': 799
            };

            $('.list li').click(function () {
                // 移除所有<i>元素的'ok'类
                $('.list li i').removeClass('ok');
                // 为当前点击的<li>元素内的<i>元素添加'ok'类
                $(this).find('i').addClass('ok');

                // 获取当前点击的会员类型的价格
                var selectedType = $(this).find('span').eq(0).text();
                var price = prices[selectedType];

                // 更新金额显示
                $('#totalAmount').text(price);
            });
        });
    </script>
</body>
</html>